<!--
 * @Author: zhayang
 * @LastEditors: zhayang 1063975710@qq.com
 * @Date: 2024-06-27 22:40:29
 * @LastEditTime: 2024-07-02 21:23:38
 * @Description: 视频卡片
-->
<template>
  <div
    class="video-card h-240 full-w p-20 flex"
    :class="{ 'is-isDo': isDo }"
    @click="handle(data.media_url)"
  >
    <img
      class="w-150 h-200 m-r-20 rd-4"
      :src="data.cover_url"
    />
    <div class="col p-y-12 relative">
      <div class="text-#1C1F23 text-14 line-height-16 font-600 m-b-8">
        {{ data.title }}
      </div>
      <div class="text-#6A6B6C text-12 line-height-14 m-b-8">
        所属合集：{{ list }}
      </div>
      <div class="text-#6A6B6C text-12 line-height-14 m-b-8">
        发布时间 ：{{ data.create_datetime }}
      </div>
      <div class="text-#9E9E9E text-12 line-height-14">
        <span
          class="iconfont icon-guankan eye-icon"
          title="播放次数"
        ></span>
        <span class="m-l-8">{{ data.play_count }}</span>
      </div>
      <div
        class="ful--w absolute bottom-12 left-0 text-#9E9E9E text-12 line-height-14 items-center edit-info"
      >
        <div
          class="m-r-20 flex items-center"
          :class="[isDo ? 'cursor-not-allowed' : 'cursor-pointer']"
          @click.stop="!isDo && editVideo(data.id)"
        >
          <div class="iconfont icon-xiugai edit-icon"></div>
          <div class="m-l-8">修改信息</div>
        </div>
        <div
          class="flex items-center"
          :class="[isDo ? 'cursor-not-allowed' : 'cursor-pointer']"
          @click.stop="!isDo && deleteVideo(data.id)"
        >
          <div class="iconfont icon-x edit-icon text-#FF3F40"></div>
          <div class="m-l-8 text-#FF3F40">删除视频</div>
        </div>
      </div>
    </div>
    <div
      v-if="isDo"
      class="col-auto flex items-center"
    >
      <div
        class="video-card-check rd-9999 w-28 h-28 center text-#fff hover:bg-#61e1d1 cursor-pointer transition"
        :class="{ 'is-checked': isChecked }"
      >
        <div class="iconfont icon-duihao"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          id: '',
          cover_url: '',
          title: '',
          create_datetime: '',
          intro: '',
          media_url: '',
          play_count: 0,
          link_series_list: []
        }
      }
    },
    isChecked: Boolean,
    isDo: Boolean
  },
  data() {
    return {}
  },
  computed: {
    list() {
      if (this.data?.link_series_list?.length) {
        const info = this.data?.link_series_list
        return info
          .map((i) => {
            return i?.series_info?.title
          })
          .join('、')
      } else {
        return '暂无'
      }
    }
  },
  created() {},
  mounted() {
    // var video = document.createElement('video')
    // video.src = 'https://media.w3.org/2010/05/sintel/trailer.mp4' // 替换成你的视频线上链接
    // video.onloadedmetadata = function () {
    //   var duration = video.duration
    //   console.log('视频时长：' + duration + '秒')
    // }
  },
  methods: {
    handle(url) {
      if (this.isDo) {
        this.changeVal(this.data.id)
      } else {
        this.$emit('open', url)
      }
    },
    changeVal(id) {
      this.$emit('check', id)
    },
    deleteVideo(id) {
      this.$emit('delete', id)
    },
    editVideo(id) {
      this.$emit('edit', id)
      this.$router.push({
        path: 'edit-video',
        query: { uid: id }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.eye-icon {
  font-size: 12px !important;
}
.edit-icon {
  font-size: 14px !important;
}
.edit-info {
  display: none;
}
.video-card {
  &.is-isDo {
    cursor: pointer;
  }
  &:hover {
    background-color: #f4f5f9;
    transition: all 0.5s;
    .edit-info {
      display: flex;
      transition: all 0.5s;
    }
  }
  .video-card-check {
    background-color: #e0e0e0;
    &.is-checked {
      background-color: #61e1d1;
    }
  }
}
</style>
